<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>VUE 事件触发</title>
    <script type="text/javascript" src="js/vue.js"></script>
    <style>
        * {
            margin-top: 20px
        }

        .style1 {
            height: 50px;
            width: 350px;
            background-color: skyblue;
        }
    </style>
</head>
<body>
<div id="root">
    <!-- * 事件基本说明：
        *   1. 使用v-on:xxx 或 @xx 绑定事件, 其中xxx是事件名
        *   2. 事件的回调需要配置在methods对象中, 最终会在vm上
        *   3. methods中配置的函数, 不要使用箭头函数, 否则this就不是vm了
        *   4. methods中配置的函数, 都是被vue管理的函数, this的指向是vm 或 组件实例对象  -->
    <h2>事件基本说明</h2>
    <button v-on:click="showInfo">please click</button>
    <button @click="showInfoTwo(66, $event)">simple write</button>

    <!-- * 事件修饰符：
        *   1. prevent: 阻止默认事件 (常用)
        *   2. stop: 阻止事件冒泡 (常用)
        *   3. once: 事件只触发一次 (常用)
        *   4. capture: 使用事件的捕获模式
        *   5. self: 只有event.target是当前操作元素才触发
        *   6. passive: 事件的默认行为立即执行, 无需等待事件事件回调执行完毕
      -->
    <h2>Vue事件修饰符</h2>
    <a href="https://www.google.com" @click.prevent="hrefShow">Go to Google</a>
    <div class="style1" @click="hrefShow">
        <button @click.stop="hrefShow">clickButton</button>
        <!-- 事件修饰符可以连着写 先阻止冒泡, 后阻止默认跳转-->
        <a href="https://www.google.com" @click.stop.prevent="hrefShow">Go to Google</a>
    </div>
    <button @click.once="hrefShow">triggerOne</button>

    <!-- * Vue常用的按键别名：
        *   回车 => enter   删除 => delete (捕获删除和退格键)   退出 => esc
        *   空格 => space   换行 => tab (必须配合keydown)   上 => up  下 => down  左  => left  右 => right
        * vue未提供的别名按键, 可以使用按键原始的key值绑定, 但注意转换为kebab-cases (短横线名)
        * 系统修饰键 (用法特殊) : ctrl, alt, shift, meta
        *   配合keyup: 按下修饰键的同时, 再按下其它键, 随后释放其它键, 事件才会触发
        *   配合keydown: 正常触发事件
        * Vue.config.keyCodes.自定义按键名 = 键码, 可以去定制按键别名
      -->
    <h2>键盘事件</h2>
    <input type="text" placeholder="please input data" @keyup.enter="keyupEvent">
    <input type="text" placeholder="ctrl+y" @keyup.ctrl.y="keyupEvent">
</div>

<script type="text/javascript">
    // 自定义按键别名
    Vue.config.keyCodes.huiche = 13// 定义一个回车别名按键

    new Vue({
        el: '#root',
        data: {
            name: 'ZhangSan'
        },
        methods: {
            showInfo(event) {
                alert(event.target.innerText)
            },
            // 需要传参写法
            showInfoTwo(number, event) {
                alert(number + " " + event.target.innerText)
            },
            hrefShow(e) {
                alert(event.target.innerText)
            },
            keyupEvent(e) {
                alert(e.key + " " + e.target.value)
            }
        }
    });

</script>
</body>
</html>